<template>
  <div class="class_page">
    <van-search v-model="search" placeholder="请输入搜索关键词" />
    <div class="count">
      <van-sidebar v-model="active" @change="check">
        <van-sidebar-item title="所有分类" />
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in bigList"
          :key="index"
        />
      </van-sidebar>
      <section class="count-right">
        <van-swipe
          class="my-swipe"
          ref="swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item>
            <img src="../../assets/img/tangyan.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yifei.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yuanyuan.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/jingtian.jpeg" alt="" />
          </van-swipe-item>
        </van-swipe>

        <van-grid :column-num="3" :border="false">
          <van-grid-item
            v-for="(item,index) in showList"
            :key="index"
            :icon="item.icon"
            :text="item.name"
          />
        </van-grid>
      </section>
    </div>
  </div>
</template>

<script>
import { category } from "../../api/home/home";
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      categoryList: [], // 所有的数据
      bigList: [], // 大类的数据
      active: 0, // 选中的打类索引
      showList: [], // 二级展示的数据
    });
    const search = ref("");
    category().then((res) => {
      // 分类的接口请求
      data.categoryList = res.data;
      //  console.log(res.data);
      data.bigList = res.data.filter((item) => item.level == 1);
      // console.log(data.bigList);
      data.showList = res.data.filter((item) => item.level == 2);

    });
    const check = (index) => {
      // console.log();
      if (index == 0) {
        data.showList = data.categoryList.filter((item) => item.level == 2);
        return;
      }
      let id = data.bigList[index-1].id;
      data.showList = data.categoryList.filter(item => item.pid == id)
    }
    return {
      ...toRefs(data),
      search,
      check
    };
  },
};
</script>
<style lang="scss" scoped>
.count {
  height: calc(100% - 54px);
  overflow-y: auto;
  background: #fff;
  display: flex;
  .count-right {
    flex: 1;
    overflow-x: hidden;
    img {
      width: 226px;
      height: 130px;
      display: block;
      margin: 0 auto;
      border-radius: 5px;
    }
  }
}
.van-sidebar {
  height: 100%;
  background: #f7f8fa;
}
</style>